<template>
  <div class="list">
      <!-- ul.good-list>li.list-item>img+p.name+p.price -->
      <ul class="goods-list">
        <li class="list-item" v-for="item in list" :key="item.goodsId">

          <!-- query传参 -->

          <!-- <router-link :to="'/detail?gid='+item.goodsId">
            <img :src="item.goodsImg" alt="">
            <p class="name line-2">{{ item.goodsName }}</p>
            <p class="price">¥  {{ item.goodsPrice }}</p>
          </router-link> -->

          <!-- <router-link :to="{path:'/detail',name:'detail',query:{gid:item.goodsId,a:1,b:2}}">
            <img :src="item.goodsImg" alt="">
            <p class="name line-2">{{ item.goodsName }}</p>
            <p class="price">¥  {{ item.goodsPrice }}</p>
          </router-link> -->

          <!-- params传参(动态路径参数) -->

          <!-- 手搓版(手动拼接) -->
          <!-- <router-link :to="'/detail-copy/'+item.goodsId">
            <img :src="item.goodsImg" alt="">
            <p class="name line-2">{{ item.goodsName }}</p>
            <p class="price">¥  {{ item.goodsPrice }}</p>
          </router-link> -->

          <router-link :to="{name:'detail-copy',params:{gid:item.goodsId,a:1,b:2}}">
            <img :src="item.goodsImg" alt="">
            <p class="name line-2">{{ item.goodsName }}</p>
            <p class="price">¥  {{ item.goodsPrice }}</p>
          </router-link>
        </li>
      </ul>
  </div>
</template>

<script>
// 单文件组件 -> 一个.vue文件就是一个组件 (template script style)
// @ is an alias to /src

import axios from "@/utils/request"

export default {
  name: 'ListView',
  data(){
    return {
      list:[],
    }
  },
  methods:{
      getGoodsList(){
        axios.get("/searchAllGoods.php").then(response=>{
          if(response.status == 200){
            return response.data;
          }else{
            var err = new Error("Request Fail!");
            // throw err;
            return Promise.reject(err);
          }
        }).then(res=>{
          console.log("商品请求成功",res);
          this.list = res.list;
        }).catch(err=>{
            console.log("err",err);
        })
      }
  },
  mounted(){
    this.getGoodsList();
  }

}

</script>


<style scoped>
.list{
  background-color: rgb(244, 244, 244);
}
    .goods-list{
      
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

    }

    .goods-list .list-item{
      width: 49%;
      padding: 0.2rem;
      box-sizing: border-box;
      background-color: #fff;
      margin-top: 0.1rem;
    }

    .goods-list .list-item img{
      display: block;
      width: 100%;
      margin: 0.2rem auto;
    }

   
</style>
